import QtQuick 1.0

Rectangle{
    id: weatherView
    color: "transparent"
    width: 360
    height: 437


    // ============XML Models================//

    // ===Information Model: City, Date, City===//
    XmlListModel {
        id: infoModel
        source: "http://www.google.com/ig/api?weather=" + textbar.text
        query: "/xml_api_reply/weather/forecast_information"

        //forecast information
        XmlRole { name: "city"; query: "city/@data/string()" }
        XmlRole { name: "forecast_date"; query: "forecast_date/@data/string()" }
        XmlRole { name: "current_date_time"; query: "current_date_time/@data/string()" }

    }

    // ===Current Conditions Models===//
    XmlListModel {
        id: currentconditionsModel
        source: "http://www.google.com/ig/api?weather=" + textbar.text
        query: "/xml_api_reply/weather/current_conditions"

        //current condition
        XmlRole { name: "condition"; query: "condition/@data/string()" }
        XmlRole { name: "temp_c"; query: "temp_c/@data/string()" }
        XmlRole { name: "humidity"; query: "humidity/@data/string()" }
        XmlRole { name: "icon"; query: "icon/@data/string()" }
        XmlRole { name: "wind_condition"; query: "wind_condition/@data/string()" }
    }

    // ===ForeCast Model===//
    XmlListModel {
        id: forecastModel

        source: "http://www.google.com/ig/api?weather="  + textbar.text
        query: "/xml_api_reply/weather/forecast_conditions"

        XmlRole { name: "day_of_week"; query: "day_of_week/@data/string()" }
        XmlRole { name: "low_f"; query: "low/@data/string()" }
        XmlRole { name: "high_f"; query: "high/@data/string()" }
        XmlRole { name: "icon"; query: "icon/@data/string()" }
        XmlRole { name: "condition"; query: "condition/@data/string()" }

    }


//=== Text Editor ===
    TextBar{
        id: textbar
    }

//=== App Body===///

    Rectangle{
        id: appBody
        width: parent.width
        height: 385
        anchors.top: textbar.bottom
        anchors.topMargin: 10
        anchors.left:parent.left
        color: "transparent"


        // === Line1===//
        Image {
            id: line1
            width: 350
            height: 1
            source: "images/line.png"
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Repeater{
            id: infoView
            width: parent.width
            model: infoModel
            delegate: Rectangle {
                id: infoViewLabel
                width: parent.width
                anchors.top: parent.top
                anchors.topMargin: 10
                color: "transparent"

                // === City Label ===//
                Text {
                    id: cityDateLabelText
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    text: city
                    font.pixelSize: 16
                    font.bold: true
                    color: "#809fbb"
                }

                // === Date Label ===//
                Text {
                    id: dateLabel
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.top: cityDateLabelText.bottom
                    anchors.topMargin: 2
                    text: forecast_date
                    font.pixelSize: 16
                    font.bold: true
                    color: "#809fbb"
                }

                // === Line2===//
                Image {
                    id: line2
                    width: 350
                    height: 1
                    //                    y:100
                    source: "images/line.png"
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: dateLabel.bottom
                    anchors.topMargin: 10
                }
            }
        }


        // === Data Rect===//
        Image {
            id: dataRect
            width: parent.width-20
            height: 315
            source: "images/bodyrect.png"
            anchors.top: infoView.bottom
            anchors.topMargin: 70
            anchors.horizontalCenter:parent.horizontalCenter

            // === Current Conditions ===//
            ListView
            {
                id: currentconditionsView
                width: parent.width
                height: 90
                //                    y: 300
                model: currentconditionsModel
                delegate:
                        Rectangle{
                    id: currentconditionsViewLabel
                    width: parent.width
                    //                            height: parent.height
                    color: "transparent"
                    Image {
                        id: currenticon
                        width: 40
                        height: 40
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.top: parent.top
                        anchors.topMargin:10
                        source: "http://www.google.com/" + icon
                    }

                    // === Current Temp Label ===//
                    Text {
                        id: tempLabelText
                        height: 40
                        anchors.left: currenticon.right
                        anchors.leftMargin: 10
                        anchors.top: parent.top
                        text: temp_c + "\u00B0C"
                        font.pixelSize: 40
                        color: "#809fbb"
                    }

                    // === Current Humidity Label ===//
                    Text {
                        id: humidityLabelText
                        //                                height: 40
                        anchors.top: currenticon.bottom
                        anchors.topMargin: 5
                        anchors.left: currenticon.left

                        //                            anchors.top: parent.top
                        text: humidity
                        font.pixelSize: 20
                        //                                font.bold: true
                        color: "#809fbb"
                    }

                }

            }

            // === Forecast Delgate===//
            Component{
                id: forecastViewDelegate
                Rectangle{
                    id: forecastViewDelegateRect
                    width: parent.width
                    height: 50
                    color: "transparent"

                    // === Icon Label ===//
                    Image {
                        id: iconLabel
                        anchors.leftMargin: 10
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        source: "http://www.google.com/" + icon
                    }

                    // === Day Label ===//
                    Text{
                        id: dayLabel
                        anchors.leftMargin: 10
                        anchors.left: iconLabel.right
                        anchors.top: parent.top
//                        anchors.verticalCenter: parent.verticalCenter
                        text: day_of_week
                        font.pixelSize: 14
                        font.bold: true
                        color: "#809fbb"
                    }

                    // === Low Temp Label ===//
                    Text{
                        id: lowcLabel
                        anchors.leftMargin: 10
                        anchors.left: dayLabel.right
                        anchors.top: parent.top
//                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 14
                        text: "<b>Low</b>: " + f2d(low_f) + "\u00B0C"
                        color: "#809fbb"
                    }

                    // === High Temp Label ===//
                    Text{
                        id: highcLabel
                        anchors.leftMargin: 14
                        anchors.left: lowcLabel.right
                        anchors.top: parent.top
//                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 14
                        textFormat: Text.StyledText
                        text: "<b>High</b>: " + f2d(high_f) +"\u00B0C"
                        color: "#809fbb"
                    }

                    // === Sky Condition Label ===//
                    Text{
                        id: conditionLabel
                        anchors.top: dayLabel.bottom
                        anchors.topMargin: 5
                        anchors.left: iconLabel.right
                        anchors.leftMargin: 10
//                        anchors.leftMargin: 14
//                        anchors.left: highcLabel.right
//                        anchors.verticalCenter: parent.verticalCenter
                        font.pixelSize: 14
                        text: "<b>Sky</b>: " + condition
                        color: "#809fbb"
                    }

                    // === Javascript Function for Fahrenheit to Celcius ===//
                    function f2d(f)
                    {
                        var d = (parseInt(f)-32)*(5/9)
                        return parseInt(d);
                    }
                }
            }


            // === Forecast List View===//
            ListView{

                id: forecastView
                width: parent.width
                height: 200
                anchors.top: currentconditionsView.bottom
                model: forecastModel
                delegate: forecastViewDelegate

            }
        }
    }
}
